<template>
	<div class="myButton" v-if="!item.common.isHidden" @tap="handleTap" :style="commonStyle + innerStyle" :class="{ disabled: !item.style.isEnabled }">
		<button open-type="share" class="share" v-if="shareInfo.hasShare" :data-share="shareInfo.shareInfo">
			<div :style="iconStyle" v-if="item.style.iconPosition === 'left' && (item.style.iconUrl || item.style.icon)"></div>
			<div :style="textStyle">{{ item.common.text }}</div>
			<div :style="iconStyle" v-if="item.style.iconPosition === 'right' && (item.style.iconUrl || item.style.icon)"></div>
		</button>
		<template v-else>
			<div :style="iconStyle" v-if="item.style.iconPosition === 'left' && (item.style.iconUrl || item.style.icon)"></div>
			<div :style="textStyle">{{ item.common.text }}</div>
			<div :style="iconStyle" v-if="item.style.iconPosition === 'right' && (item.style.iconUrl || item.style.icon)"></div>
		</template>
	</div>
</template>

<script>
	import { handleEvent } from '../libs/utils.js';
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myButton',
		props:{
			listData: null,
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data(){
			return {
				item: {common: {},style: {}},
			}
		},
		inject: ['options'],
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed:{
			shareInfo(){
				var item = this.item
				var shareInfo = {},hasShare = false;
				if (item.event) {
					hasShare = item.event.some(e => {
						if (e.type === 'sharePage') {
							shareInfo = e;
							// 如果此分享按钮上也绑定了发送链接的埋点,那么要把埋点配置也放到分享配置里去
							var buriedPointConfig = item.event.filter(e=>e.type === 'buriedPoint'&&e.itemCode === '001001')
							var tranConfig = buriedPointConfig.length > 0 ? buriedPointConfig[0] : undefined
							shareInfo.tranConfig = tranConfig
							return true;
						}
					});
				}
				return { hasShare, shareInfo };
			},
			commonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH)
			},
			innerStyle() {
				var item = this.item
				var bgImg = 'background-image:url(' + item.style.backgroundUrl + ');background-size:' + item.common.width + 'rpx ' + item.common.height + 'rpx;background-position:0 0;';
				return (
					bgImg +
					'border-radius:' +
					item.style.borderRadius +
					'rpx;border:' +
					item.style.borderStyle +
					' ' +
					item.style.borderColor +
					' ' +
					item.style.borderWidth +
					'rpx;background-color:' +
					item.style.bgColor +
					';opacity:' +
					item.style.opacity +
					';'
				);
			},
			textStyle() {
				var button = this.item
				return 'height:' + (button.style.fontSize + 10) + 'rpx;font-size:' + button.style.fontSize + 'rpx;line-height:' + (button.style.fontSize + 10) + 'rpx;color:' + button.style.color + ';'
			},
			btnIcon(){
				var button = this.item
				return {
					common: {
						width: button.common.height * 0.6,
						height: button.common.height * 0.6
					},
					style: {
						icon: true,
						iconFileName: '',
						iconFileParam: button.style.iconFileParam
					}
				}
			},
			iconStyle() {
				var button = this.item, icon = this.btnIcon;
				var style = 'width:' + icon.common.width + 'rpx;height:' + icon.common.height + 'rpx;';
				if (!button.style.icon) {
					style += 'background-image:url(' + button.style.iconUrl + ');background-size:100% 100%;background-position:0 0;'
				} else {
					style += this.iconSkinStyle
				}
				return style
			},
			iconSkinStyle(){
				var pic = this.btnIcon,skinIconStyle = '';
				skinIconStyle +=
					'background-image:url(' + this.$skinUrl + ');' +
					'background-size:' + this.$skinW * this.picRatio1 + 'rpx ' + this.$skinH * this.pciRatio2 + 'rpx;' +
					'background-position:' + this.picLeft + 'rpx ' + this.picTop + 'rpx;';
				return skinIconStyle
			},
			picRatio1() {
				var pic = this.btnIcon
				return pic.common.width / this.iconW;
			},
			pciRatio2() {
				var pic = this.btnIcon
				return pic.common.height / this.iconH;
			},
			picLeft() {
				return -this.iconX * this.picRatio1;
			},
			picTop() {
				return -this.iconY * this.pciRatio2;
			},
			iconW(){
				return this.icon.width || 1
			},
			iconH(){
				return this.icon.height || 1
			},
			iconX(){
				return this.icon.x || 0
			},
			iconY(){
				return this.icon.y || 0
			},
			icon(){
				var pic = this.btnIcon
				return this.$icons[pic.style.iconFileParam] || {}
			},
		},
		methods:{
			handleTap(){
				if(!this.item.style.isEnabled){
					return
				}
				handleEvent(this.item.event, this.listData || {}, this.pageConfig, this.options);
			}
		}
	}
</script>

<style lang="less" scoped>
	.myButton {
		position: absolute;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		&:active {
			opacity: 0.6 !important;
		}
		&.disabled {
			opacity: 0.6 !important;
		}
		.share {
			border: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			border-radius: 0;
			font-size: unset;
			text-align: unset;
			line-height: unset;
			color: unset;
			background-color: unset;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			&::after {
				display: none;
			}
		}
	}
</style>
